@mixin concaveRounded($bdrs: 15px, $border_width: 1px, $color: #6678ff) {
  background: radial-gradient(
      $bdrs at $bdrs $bdrs,
      transparent calc(97% - $border_width),
      $color calc(100% - $border_width) 98%,
      transparent
    ),
    linear-gradient($color, $color), linear-gradient($color, $color),
    linear-gradient($color, $color), linear-gradient($color, $color);
  background-position: calc(-1 * $bdrs) calc(-1 * $bdrs), calc($bdrs - 1px) 0,
    calc($bdrs - 1px) 100%,
    // 两条横边
    0 calc($bdrs - 1px),
    100% calc($bdrs - 1px); // 两条纵边
  background-size: 100% 100%, calc(100% - calc($bdrs * 2 - 2px)) $border_width,
    calc(100% - calc($bdrs * 2 - 2px)) $border_width,
    $border_width calc(100% - calc($bdrs * 2 - 2px)),
    $border_width calc(100% - calc($bdrs * 2 - 2px));
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

@mixin maskInsetCircle(
  $diameter: 12px,
  $bg: linear-gradient(45deg, #2179f5, #e91e63)
) {
  background: $bg;
  mask: radial-gradient(
      circle at 100% 100%,
      transparent 0,
      transparent $diameter,
      #2179f5 calc($diameter + 1px)
    ),
    radial-gradient(
      circle at 0 0,
      transparent 0,
      transparent $diameter,
      #2179f5 calc($diameter + 1px)
    ),
    radial-gradient(
      circle at 100% 0,
      transparent 0,
      transparent $diameter,
      #2179f5 calc($diameter + 1px)
    ),
    radial-gradient(
      circle at 0 100%,
      transparent 0,
      transparent $diameter,
      #2179f5 calc($diameter + 1px)
    );
  mask-repeat: no-repeat;
  mask-size: 70% 70%;
  mask-position: right bottom, left top, right top, left bottom;
}
